<template>
	<div class="widgets-content">
		<component :is="data.remote" v-if="data.remote" v-bind="$attrs" />
	</div>
</template>

<script>
import { reactive, onMounted } from "vue";
import * as Vue from "vue";//重要
import { loadModule } from "@/utils/vue3-sfc-loader.js";//重要
export default {
	props:{
		portalId:{type:String}
	},
	data() {
		return {
			data:reactive({
				remote: null,
				temp: "",
				options: {
					moduleCache: {
						vue: Vue,
					},
					// 获取文件
					async getFile(url) {
						const res = await fetch(url).then((response) => response.text());
						return Promise.resolve(res);
					},
					// 添加样式
					addStyle(textContent) {
						const style = Object.assign(document.createElement("style"), {
							textContent,
						});
						const ref = document.head.getElementsByTagName("style")[0] || null;
						document.head.insertBefore(style, ref);
					},
				},
			})
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.load(this.$CONFIG.API_URL+"/get/system/"+this.portalId+"/portal.vue");
		})
	},
	methods:{
		async load(url) {
			let com = await loadModule(url, this.data.options);
			this.data.remote = com;
		}
	}
}
</script>
<style  scoped>
.widgets-content {flex: 1;overflow: auto;overflow-x:hidden;padding:5px;}
</style>
